<template>
  <!-- 学校基本信息 -->
  <div class="eqcount-content-info">
    <div class="title1" style="margin-top:80px;">震级统计</div>
    <div style="display:flex; padding-left: 10%;">
      <div style="position:relative; width:35%;">
        <div style="display:flex;">
          <div>
            <img class="area-icon" src="@/assets/img/area.png" alt="">
          </div>
          <div style="margin-bottom:1%;">
            <div class="subtitle">5级以上地震</div>
            <div class="content">{{lastTotalDataDict['lg5']}} <span class="unit">次</span></div>
          </div>
        </div>
        <div style="display:flex;margin-bottom:1%">
          <div>
            <img class="build-icon" src="@/assets/img/area.png" alt="">
          </div>
          <div>
            <div class="subtitle">4级以上地震</div>
            <div class="content">{{lastTotalDataDict['lg4']}} <span class="unit">次</span></div>
          </div>
        </div>
        <div style="display:flex;margin-bottom:1%">
          <div>
            <img class="build-icon" src="@/assets/img/area.png" alt="">
          </div>
          <div>
            <div class="subtitle">3级以上地震</div>
            <div class="content">{{lastTotalDataDict['lg3']}} <span class="unit">次</span></div>
          </div>
        </div>
      </div>
      <div style="position:relative; width:50%;">
        <div class="cube-icon img-bounce">
          <img src="@/assets/img/5.png" alt="">
        </div>
        <div class="light-bg">
          <img src="@/assets/img/light-bg.png" alt="">
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'eqcountContent1',
  props:{
    lastTotalDataDict:{
            type:Object,  //类型判断
            default:{}    //默认值
        }
  },
  data() {
        return {
        }
  },
  methods: {
  },
}
</script>
<style>
.eqcount-content-info .title1{
	font-family: SourceHanSansCN-Bold;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 34px;
	letter-spacing: 1px;
	color: #b1eded;
	margin-top: 8px;
	background: url(@/assets/img/sub_title_bg.png);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 300px;
	height: 38px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.eqcount-content-info .subtitle {
  font-size: 14px;
  color: #b1eded;
  margin-bottom: 5px;
}

.eqcount-content-info .content {
  font-size: 24px;
  line-height: 20px;
  color: #ffffff;
}

.eqcount-content-info .unit {
  font-size: 14px;
  line-height: 28px;
  color: #b1eded;
}

.eqcount-content-info .area-icon,
.eqcount-content-info .build-icon {
  width: 17px;
  height: 13px;
  margin-right: 11px;
}

.eqcount-content-info .light-bg img {
  width: 287px;
  height: 202px;
  margin-top: 20%;
}

.eqcount-content-info .cube-icon img {
  width: 121px;
  height: 123px;
  position: absolute;
  top: 15%;
  left: 24%;
}


.eqcount-content-info .school-title {
  color: #b1eded;
  font-size: 14px;
  margin-left: 10px;
}

.eqcount-content-info .school-num {
  color: #b1eded;
  font-size: 25px;
  padding: 0 7px
}

.eqcount-content-info .static-bg {
  margin-top: 12px;
  background: url(../../../assets/img/static-bg.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  width: 206px;
  height: 66px;
}

.static-bg .name {
  color: #b1eded;
  font-size: 14px;
  text-align: center;
}

.bar-chart canvas {
  width: 450px !important;
  height: 300px !important;
  left: 6% !important;
  top: -15% !important;
}

/* 分割线 */
.divider{
	height:1px;
	background-color: #528693;
	width:100%;
}

/* 图片弹跳 */
.img-bounce{
	animation: bounce 1s linear infinite;
	-moz-animation: bounce 1s linear infinite; /* Firefox */
	-webkit-animation: bounce 1s linear infinite; /* Safari 和 Chrome */
	-o-animation: bounce 1s linear infinite; /* Opera */
}
@keyframes bounce {
	25% {transform: translateY(-5px);}
	50%, 100% {transform: translateY(0);}
	75% {transform: translateY(5px);}
}
@-moz-keyframes bounce /* Firefox */ {
	25% {transform: translateY(-5px);}
	50%, 100% {transform: translateY(0);}
	75% {transform: translateY(5px);}
}
@-webkit-keyframes bounce /* Safari 和 Chrome */ {
	25% {transform: translateY(-5px);}
	50%, 100% {transform: translateY(0);}
	75% {transform: translateY(5px);}
}
@-o-keyframes bounce /* Opera */ {
	25% {transform: translateY(-5px);}
	50%, 100% {transform: translateY(0);}
	75% {transform: translateY(5px);}
}
</style>